<template>
  <div>
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      right-text="注册"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-form @submit="onSubmit" ref="myform">
      <!-- van-field 字段的name就是发送给后端接口的字段 -->
      <van-field
        v-model="mytel"
        name="logphone"
        label="手机号"
        left-icon="phone"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }, { pattern: /^1[3-9]\d{9}$/, message: '请填写正确的手机号' },]"
      />
      <van-field
        v-model="password"
        type="password"
        name="logpwd"
        label="密码"
        left-icon="lock"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />

      <div style="margin: 16px;">
        <van-button block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
import request from "@/api/user.js";
export default {
  data() {
    return {
      mytel: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log(values);
      //  注册
      request.login(values).then((r) => {
        console.log(r.data);
        if (r.data.code === 0) {
          Toast.success("登录成功！");
          this.mytel = "";
          this.password = "";
          this.$router.push("/user");
          this.$store.commit("setUser", r.data);
        } else {
          Toast.fail(r.data.msg);
        }
      });
    },
    onClickLeft() {
      this.$router.back();
    },
    onClickRight() {
      this.$router.push("/register");
    },
  },
};
</script>

<style >
.van-nav-bar {
  background-color: rgb(5, 128, 235);
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-nav-bar .van-icon {
  color: #fff;
}
.van-nav-bar__text {
  color: #fff;
}
</style>